import React, { useState, useEffect } from 'react';
import { 
  Menu, X, CheckCircle, ArrowRight, 
  Smartphone, Globe, Zap, Search,
  Layout, Shield, Star, ChevronDown, Mail, BarChart,
  Users, Clock, Lock, Grid, MessageCircle
} from 'lucide-react';

const OnePageWebsite = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeFaq, setActiveFaq] = useState(null);
  const [scrolled, setScrolled] = useState(false);

  // Your WhatsApp Number
  const whatsappNumber = "17879684143";
  const whatsappLink = `https://wa.me/${whatsappNumber}`;

  // Handle scroll effect for navbar
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const toggleFaq = (index) => setActiveFaq(activeFaq === index ? null : index);

  const navigation = [
    { name: 'Problems', href: '#problem' },
    { name: 'SEO & Growth', href: '#seo' },
    { name: 'Portfolio', href: '#portfolio' },
    { name: 'Pricing', href: '#offer' },
  ];

  return (
    <div className="font-sans text-slate-800 bg-slate-50 selection:bg-indigo-500 selection:text-white overflow-x-hidden">
      
      {/* GLOBAL STYLES FOR ANIMATIONS */}
      <style>{`
        @keyframes float {
          0% { transform: translateY(0px); }
          50% { transform: translateY(-10px); }
          100% { transform: translateY(0px); }
        }
        @keyframes pulse-glow {
          0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
          50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
        }
        @keyframes spin-slow {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .animate-float { animation: float 6s ease-in-out infinite; }
        .animate-pulse-glow { animation: pulse-glow 2s infinite; }
        .animate-spin-slow { animation: spin-slow 12s linear infinite; }
        .glass-nav {
          background: rgba(255, 255, 255, 0.85);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }
      `}</style>

      {/* FLOATING WHATSAPP BUTTON */}
      <a 
        href={whatsappLink}
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-6 right-6 z-[60] bg-green-500 text-white p-4 rounded-full shadow-2xl hover:bg-green-600 transition-all transform hover:scale-110 flex items-center justify-center animate-pulse-glow"
        aria-label="Chat on WhatsApp"
      >
        <MessageCircle size={32} fill="white" className="text-white" />
        <span className="absolute right-full mr-4 bg-white text-slate-800 px-3 py-1 rounded-lg text-sm font-bold shadow-lg whitespace-nowrap opacity-0 hover:opacity-100 transition-opacity hidden md:block">
          Chat with me!
        </span>
      </a>

      {/* 1. NAVIGATION */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'glass-nav shadow-lg border-b border-indigo-50/50 py-2' : 'bg-transparent py-4'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex-shrink-0 flex items-center gap-2 group cursor-pointer">
              <div className="bg-indigo-600 p-2 rounded-lg text-white transform group-hover:rotate-180 transition-transform duration-700 ease-out shadow-lg shadow-indigo-500/30">
                <Grid size={24} strokeWidth={2.5} />
              </div>
              <span className="font-bold text-2xl tracking-tighter text-slate-900 group-hover:text-indigo-900 transition-colors">
                Conversion<span className="text-indigo-600">Grid</span>
              </span>
            </div>
            
            {/* Desktop Nav */}
            <div className="hidden md:flex space-x-8 items-center">
              {navigation.map((item) => (
                <a key={item.name} href={item.href} className="text-sm font-semibold text-slate-600 hover:text-indigo-600 transition-colors">
                  {item.name}
                </a>
              ))}
              <a href="#contact" className="bg-slate-900 text-white px-6 py-2.5 rounded-full text-sm font-bold hover:bg-indigo-600 transition-all shadow-lg hover:shadow-indigo-500/30 transform hover:-translate-y-0.5">
                Get Free Mockup
              </a>
            </div>

            {/* Mobile Menu Button */}
            <div className="flex items-center md:hidden">
              <button onClick={toggleMenu} className="text-slate-600 hover:text-indigo-600 p-2">
                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Nav Dropdown */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t border-slate-100 absolute w-full shadow-2xl">
            <div className="px-4 pt-2 pb-6 space-y-1">
              {navigation.map((item) => (
                <a 
                  key={item.name} 
                  href={item.href} 
                  onClick={() => setIsMenuOpen(false)}
                  className="block px-3 py-4 text-base font-medium text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 rounded-md"
                >
                  {item.name}
                </a>
              ))}
              <div className="pt-4">
                <a href="#contact" onClick={() => setIsMenuOpen(false)} className="block w-full text-center bg-indigo-600 text-white px-4 py-3 rounded-xl font-bold shadow-lg">
                  Get Free Mockup
                </a>
              </div>
            </div>
          </div>
        )}
      </nav>

      {/* 2. MODERN HERO SECTION */}
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center max-w-4xl mx-auto">
            
            <div className="mx-auto">
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100 text-sm font-bold mb-8">
                <span className="relative flex h-2.5 w-2.5">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-indigo-600"></span>
                </span>
                Accepting 3 Clients for January
              </div>
              
              <h1 className="text-5xl md:text-7xl font-extrabold text-slate-900 tracking-tight leading-[1.1] mb-6">
                Your Competitors Are <br className="hidden md:block" />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">
                  Stealing Your Customers
                </span>
              </h1>
              
              <p className="text-lg md:text-xl text-slate-500 mb-8 leading-relaxed max-w-2xl mx-auto">
                While you rely on word-of-mouth, they are booking jobs on Google. Get a modern website that works 24/7—with <span className="text-slate-900 font-bold">zero monthly fees.</span>
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <a href="#contact" className="px-8 py-4 bg-indigo-600 text-white rounded-full font-bold text-lg shadow-xl hover:bg-indigo-700 hover:shadow-indigo-500/40 transition-all transform hover:-translate-y-1 flex items-center justify-center gap-2 w-full sm:w-auto">
                  Claim Your Free Mockup <ArrowRight size={20} />
                </a>
                <a href="#portfolio" className="px-8 py-4 bg-white text-slate-700 border border-slate-200 rounded-full font-bold text-lg hover:border-indigo-300 hover:text-indigo-600 hover:bg-indigo-50 transition-all flex items-center justify-center w-full sm:w-auto">
                  View Portfolio
                </a>
              </div>
              <div className="mt-4 text-center">
                <a href={whatsappLink} target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-green-600 hover:text-green-700 flex items-center justify-center gap-1">
                  <MessageCircle size={16} /> Questions? Chat on WhatsApp
                </a>
              </div>
              <div className="mt-8 flex items-center justify-center gap-4 text-sm text-slate-400 font-medium">
                <div className="flex -space-x-2">
                  {[1,2,3,4].map((i) => (
                    <div key={i} className="w-8 h-8 rounded-full bg-slate-200 border-2 border-white"></div>
                  ))}
                </div>
                <p>Trusted by 50+ Local Owners</p>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* NEW PAIN POINT SECTION 1: THE REFERRAL TRAP */}
      <section className="py-16 bg-white border-t border-slate-100">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h3 className="text-lg font-bold text-slate-400 uppercase tracking-wider mb-8">The Hard Truth About Referrals</h3>
            <div className="bg-red-50 rounded-3xl p-8 md:p-12 border border-red-100 relative overflow-hidden">
                <div className="relative z-10">
                    <h2 className="text-3xl font-bold text-slate-900 mb-4">"Word of Mouth" has a ceiling.</h2>
                    <p className="text-lg text-slate-600 max-w-2xl mx-auto mb-6">
                        Referrals are great, but they dry up. To grow, you need strangers to find you, trust you, and hire you—without you ever shaking their hand. 
                    </p>
                    <div className="inline-flex items-center gap-2 text-red-600 font-bold bg-white px-4 py-2 rounded-lg shadow-sm">
                        <Users size={20} />
                        <span>You are missing 70% of the market</span>
                    </div>
                </div>
                {/* Decorative background circle */}
                <div className="absolute -top-24 -right-24 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50"></div>
            </div>
        </div>
      </section>

      {/* 3. PROBLEM SECTION */}
      <section id="problem" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 max-w-3xl mx-auto">
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-6">Are You "Invisible" Online?</h2>
            <p className="text-xl text-slate-600">
              Most small businesses rely on word-of-mouth. But in 2026, if you aren't on Google, you don't exist to new customers.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              { icon: Search, color: "red", title: "You're Hard to Find", desc: "Customers are searching for your services right now, but they're calling your competitors because they can't find your website." },
              { icon: Shield, color: "orange", title: "You Lack Credibility", desc: "A Facebook page isn't enough. People trust businesses with professional websites. Without one, you look risky." },
              { icon: Smartphone, color: "blue", title: "Mobile Misses", desc: "60% of searches happen on phones. If you don't have a mobile-optimized site, you are literally pushing customers away." }
            ].map((item, i) => (
              <div key={i} className="bg-white p-10 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 group">
                <div className={`w-14 h-14 bg-${item.color}-50 rounded-2xl flex items-center justify-center text-${item.color}-600 mb-6 group-hover:scale-110 transition-transform`}>
                  <item.icon size={28} />
                </div>
                <h3 className="text-2xl font-bold text-slate-900 mb-4">{item.title}</h3>
                <p className="text-slate-600 leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NEW PAIN POINT SECTION 2: SOCIAL MEDIA VS WEBSITE */}
      <section className="py-20 bg-slate-900 text-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <div className="inline-block px-4 py-1.5 rounded-full bg-indigo-500/20 text-indigo-300 font-bold text-sm mb-6 uppercase tracking-wider border border-indigo-500/30">
                        The Social Media Trap
                    </div>
                    <h2 className="text-3xl md:text-5xl font-bold mb-6">Facebook Is Not A Website.</h2>
                    <p className="text-slate-300 text-lg mb-8 leading-relaxed">
                        Algorithms change. Accounts get blocked. Posts get buried. 
                        When you rely on social media, you are renting your audience. 
                        <br/><br/>
                        <span className="text-white font-bold">A website is digital real estate that you own forever.</span>
                    </p>
                </div>
                <div className="relative">
                    {/* Abstract visual comparison */}
                    <div className="bg-white/10 backdrop-blur-md border border-white/10 rounded-2xl p-8 transform rotate-3 hover:rotate-0 transition-all duration-500">
                        <div className="flex items-center gap-4 mb-6 border-b border-white/10 pb-6">
                            <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center"><Users size={24}/></div>
                            <div>
                                <h4 className="font-bold text-lg">Social Media Page</h4>
                                <p className="text-slate-400 text-sm">You don't own the data</p>
                            </div>
                        </div>
                        <div className="flex items-center gap-4">
                            <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center"><Globe size={24}/></div>
                            <div>
                                <h4 className="font-bold text-lg">Your Custom Website</h4>
                                <p className="text-green-300 text-sm font-bold">100% Ownership & Control</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </section>

      {/* 4. SEO SECTION */}
      <section id="seo" className="py-24 bg-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            
            <div className="order-2 lg:order-1 relative group">
              <div className="absolute -inset-4 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-[2.5rem] opacity-30 blur-2xl group-hover:opacity-50 transition-opacity duration-500"></div>
              <img 
                src="https://i.ibb.co/R49428mH/What-Is-Local-SEO-For-Small-Business-1024x576.jpg" 
                alt="Local SEO for Small Business" 
                className="relative rounded-[2rem] shadow-2xl w-full h-auto object-contain transform transition-transform duration-700 group-hover:scale-[1.01]"
              />
            </div>
            
            <div className="order-1 lg:order-2 flex flex-col justify-center">
              <div className="inline-block px-4 py-1.5 rounded-full bg-blue-50 text-blue-700 font-bold text-sm mb-6 uppercase tracking-wider w-fit">
                Google Domination
              </div>
              <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-6 leading-tight">
                Rank Higher. <br/>
                <span className="text-blue-600">Get More Calls.</span>
              </h2>
              <p className="text-lg text-slate-600 mb-8 leading-relaxed">
                A pretty website is useless if nobody sees it. My websites are built with <strong>Local SEO</strong> baked in from line one.
              </p>

              <div className="space-y-6">
                {[
                  "Optimized for 'Near Me' searches.",
                  "Fast loading speeds Google loves.",
                  "Proper Schema markup for rich snippets.",
                  "Integrated with your Google Business Profile."
                ].map((item, index) => (
                  <div key={index} className="flex items-center bg-slate-50 p-4 rounded-xl border border-slate-100 hover:border-blue-200 transition-colors">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                      <CheckCircle size={16} />
                    </div>
                    <p className="ml-4 text-lg text-slate-800 font-semibold">{item}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 5. CTA BANNER */}
      <section className="bg-slate-900 py-12 relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
          <div className="text-center md:text-left">
            <h3 className="text-2xl font-bold text-white mb-2">Ready to grow your business?</h3>
            <p className="text-slate-400">Get a custom design mockup delivered in 24 hours.</p>
          </div>
          <a href="#contact" className="bg-white text-indigo-900 px-8 py-4 rounded-xl font-bold text-lg hover:bg-indigo-50 transition-all shadow-xl hover:shadow-2xl transform hover:-translate-y-1 min-w-[200px] text-center">
            Yes, Send Mockup
          </a>
        </div>
      </section>

      {/* 6. PORTFOLIO SECTION */}
      <section id="portfolio" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-6">Results You Can See</h2>
            <p className="text-xl text-slate-600 max-w-2xl mx-auto">
              I specialize in working with trades, health, and local services. Here is what I've built for businesses like yours.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-10">
            {/* Project 1 */}
            <div className="group rounded-3xl overflow-hidden bg-white shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
              <div className="h-64 overflow-hidden relative cursor-pointer">
                <div className="absolute inset-0 bg-indigo-900/0 group-hover:bg-indigo-900/10 transition-all z-10 duration-500"></div>
                <img 
                  src="https://i.ibb.co/xq70sdNm/smb-health.png" 
                  alt="SMB Health Insurance" 
                  className="w-full h-full object-cover object-top transform group-hover:scale-110 transition-transform duration-700" 
                />
              </div>
              <div className="p-8">
                <div className="flex justify-between items-center mb-2">
                   <h3 className="text-xl font-bold text-slate-900">SMB Health Plans</h3>
                   <span className="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded-full">Finance</span>
                </div>
                <p className="text-slate-500 text-sm mb-4">Lead generation funnel for small business insurance quotes.</p>
                <a 
                  href="https://zippy-faloodeh-513826.netlify.app/" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="text-indigo-600 font-bold text-sm flex items-center gap-1 group-hover:gap-2 transition-all"
                >
                  View Website <ArrowRight size={16}/>
                </a>
              </div>
            </div>

            {/* Project 2 */}
            <div className="group rounded-3xl overflow-hidden bg-white shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
              <div className="h-64 overflow-hidden relative cursor-pointer">
                <div className="absolute inset-0 bg-indigo-900/0 group-hover:bg-indigo-900/10 transition-all z-10 duration-500"></div>
                <img 
                  src="https://i.ibb.co/YTw4Gq8w/plumbing-new-website.png" 
                  alt="FlowGuard Plumbing" 
                  className="w-full h-full object-cover object-top transform group-hover:scale-110 transition-transform duration-700" 
                />
              </div>
              <div className="p-8">
                <div className="flex justify-between items-center mb-2">
                   <h3 className="text-xl font-bold text-slate-900">FlowGuard Plumbing</h3>
                   <span className="bg-blue-100 text-blue-700 text-xs font-bold px-2 py-1 rounded-full">Trade</span>
                </div>
                <p className="text-slate-500 text-sm mb-4">Emergency booking system and service area mapping.</p>
                <a 
                  href="https://samplewebsite9.pages.dev/" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="text-indigo-600 font-bold text-sm flex items-center gap-1 group-hover:gap-2 transition-all"
                >
                  View Website <ArrowRight size={16}/>
                </a>
              </div>
            </div>

            {/* Project 3 */}
            <div className="group rounded-3xl overflow-hidden bg-white shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
              <div className="h-64 overflow-hidden relative cursor-pointer">
                <div className="absolute inset-0 bg-indigo-900/0 group-hover:bg-indigo-900/10 transition-all z-10 duration-500"></div>
                <img 
                  src="https://i.ibb.co/FqwYhMLn/gym-business.png" 
                  alt="IronStrength Gym" 
                  className="w-full h-full object-cover object-top transform group-hover:scale-110 transition-transform duration-700" 
                />
              </div>
              <div className="p-8">
                <div className="flex justify-between items-center mb-2">
                   <h3 className="text-xl font-bold text-slate-900">IronStrength Gym</h3>
                   <span className="bg-orange-100 text-orange-700 text-xs font-bold px-2 py-1 rounded-full">Fitness</span>
                </div>
                <p className="text-slate-500 text-sm mb-4">Membership signup flow and class schedule integration.</p>
                <a 
                  href="https://testgym2.pages.dev/" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="text-indigo-600 font-bold text-sm flex items-center gap-1 group-hover:gap-2 transition-all"
                >
                  View Website <ArrowRight size={16}/>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* NEW PAIN POINT SECTION 3: THE CLOSED SIGN */}
      <section className="py-20 bg-slate-50 border-t border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="bg-white rounded-3xl shadow-xl overflow-hidden">
                <div className="grid md:grid-cols-2">
                    <div className="p-12 flex flex-col justify-center">
                        <div className="inline-flex items-center gap-2 text-red-600 font-bold mb-4">
                            <Clock size={20} />
                            <span>It's 11:00 PM. Are you open?</span>
                        </div>
                        <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Don't lose money while you sleep.</h2>
                        <p className="text-lg text-slate-600 mb-8">
                            A customer needs your service <i>right now</i>. If you don't answer the phone, they call the next guy. <br/><br/>
                            My websites have <strong>automated booking and contact forms</strong> so you wake up to new leads, not missed opportunities.
                        </p>
                        <a href="#contact" className="inline-block bg-slate-900 text-white px-8 py-4 rounded-xl font-bold w-fit hover:bg-indigo-600 transition-colors">
                            Get Free Mockup
                        </a>
                    </div>
                    <div className="bg-slate-100 flex items-center justify-center p-12">
                        {/* Visual representation of leads */}
                        <div className="bg-white p-6 rounded-2xl shadow-lg w-full max-w-sm">
                            <div className="flex items-center justify-between border-b border-slate-100 pb-4 mb-4">
                                <span className="font-bold text-slate-900">New Leads (3)</span>
                                <span className="text-xs text-green-600 bg-green-50 px-2 py-1 rounded-full font-bold">Just Now</span>
                            </div>
                            <div className="space-y-4">
                                <div className="flex items-center gap-3 opacity-100">
                                    <div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-xs">JD</div>
                                    <div className="flex-1">
                                        <div className="h-2 w-24 bg-slate-200 rounded mb-1"></div>
                                        <div className="h-2 w-16 bg-slate-100 rounded"></div>
                                    </div>
                                    <div className="text-xs text-slate-400">11:42 PM</div>
                                </div>
                                <div className="flex items-center gap-3 opacity-60">
                                    <div className="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 font-bold text-xs">SM</div>
                                    <div className="flex-1">
                                        <div className="h-2 w-20 bg-slate-200 rounded mb-1"></div>
                                        <div className="h-2 w-12 bg-slate-100 rounded"></div>
                                    </div>
                                    <div className="text-xs text-slate-400">10:15 PM</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </section>

      {/* 7. BUSINESS BENEFIT VISUAL (CTA UNIFIED) */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="bg-slate-900 rounded-[3rem] p-8 md:p-16 relative overflow-hidden shadow-2xl">
                <div className="absolute top-0 right-0 w-1/2 h-full bg-indigo-600/20 blur-3xl rounded-full translate-x-1/2"></div>
                <div className="relative z-10 grid md:grid-cols-2 gap-12 items-center">
                    
                    <div className="flex flex-col justify-center">
                        <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Built for Mobile. <br/>Built for Speed.</h2>
                        <p className="text-slate-300 text-lg mb-8">
                            Your new website will load instantly on any device. I use modern static technology that is secure, fast, and impossible to hack.
                        </p>
                        <ul className="space-y-4 mb-8">
                            <li className="flex items-center text-white font-medium">
                                <div className="bg-green-500/20 p-2 rounded-lg mr-4"><Zap className="text-green-400" size={20}/></div>
                                99/100 Google Speed Score
                            </li>
                            <li className="flex items-center text-white font-medium">
                                <div className="bg-green-500/20 p-2 rounded-lg mr-4"><Smartphone className="text-green-400" size={20}/></div>
                                Perfect on iPhone & Android
                            </li>
                        </ul>
                        <a href="#contact" className="inline-block bg-indigo-600 text-white px-8 py-4 rounded-xl font-bold hover:bg-indigo-500 transition-colors w-fit">
                            Get Free Mockup
                        </a>
                    </div>
                    
                    <div className="relative">
                        <img 
                            src="https://i.ibb.co/LXYqGnTP/biz.jpg" 
                            alt="Mobile Business Success" 
                            className="rounded-2xl shadow-2xl border-4 border-slate-700 w-full h-auto max-h-[500px] object-cover transform rotate-2 hover:rotate-0 transition-all duration-500"
                        />
                    </div>
                </div>
            </div>
        </div>
      </section>

      {/* 8. OFFER SECTION (UPDATED PRICING) */}
      <section id="offer" className="py-24 bg-indigo-50 relative">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-6">Simple, Honest Pricing</h2>
            <p className="text-xl text-slate-600 max-w-2xl mx-auto">
              Stop paying monthly fees for a website you don't own.
            </p>
          </div>

          <div className="bg-white rounded-[2.5rem] shadow-2xl overflow-hidden border-4 border-white transform hover:scale-[1.01] transition-all duration-500">
             <div className="grid md:grid-cols-2">
                <div className="p-12 bg-slate-50 flex flex-col justify-center border-b md:border-b-0 md:border-r border-slate-100">
                    <div className="text-sm font-bold text-slate-500 uppercase tracking-wide mb-2">Standard Agency</div>
                    <div className="text-4xl font-bold text-slate-300 line-through mb-1">$1,500</div>
                    <div className="text-xl text-red-400 font-semibold mb-8">+ $50/month forever</div>
                    <ul className="space-y-4 text-slate-400">
                        <li className="flex items-center gap-3"><XCircle size={20} /> You rent the site</li>
                        <li className="flex items-center gap-3"><XCircle size={20} /> Slow Wordpress templates</li>
                        <li className="flex items-center gap-3"><XCircle size={20} /> Hidden maintenance fees</li>
                    </ul>
                </div>
                
                <div className="p-12 bg-white relative">
                    <div className="absolute top-0 right-0 bg-yellow-400 text-indigo-900 text-xs font-bold px-4 py-2 rounded-bl-xl">BEST VALUE</div>
                    <div className="text-sm font-bold text-indigo-600 uppercase tracking-wide mb-2">My Package</div>
                    <div className="text-5xl font-extrabold text-slate-900 mb-1">$150 - $300</div>
                    <div className="text-xl text-green-600 font-bold mb-8">One-time payment</div>
                    <ul className="space-y-4 font-medium text-slate-700 mb-8">
                        <li className="flex items-center gap-3"><CheckCircle size={20} className="text-indigo-600"/> <span className="bg-yellow-100 px-1 rounded">No Hosting Charges</span></li>
                        <li className="flex items-center gap-3"><CheckCircle size={20} className="text-indigo-600"/> <span className="bg-yellow-100 px-1 rounded">No Monthly Billing</span></li>
                        <li className="flex items-center gap-3"><CheckCircle size={20} className="text-indigo-600"/> 100% Ownership</li>
                        <li className="flex items-center gap-3"><CheckCircle size={20} className="text-indigo-600"/> Mobile & SEO Optimized</li>
                    </ul>
                    <a href="#contact" className="block w-full py-4 bg-indigo-600 text-white text-center rounded-xl font-bold text-lg hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200">
                        Get Free Mockup
                    </a>
                    <div className="mt-4 text-center">
                         <a href={whatsappLink} target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-green-600 hover:text-green-700 flex items-center justify-center gap-1">
                           <MessageCircle size={16} /> Chat on WhatsApp
                         </a>
                    </div>
                </div>
             </div>
          </div>
        </div>
      </section>

      {/* 9. CONTACT SECTION */}
      <section id="contact" className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-8">Stop Losing Customers Today.</h2>
            <p className="text-xl text-slate-600 mb-12">
                I'll design a mockup for your business for free. If you like it, we build it. If not, no hard feelings.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-6 justify-center">
                <a href={whatsappLink} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-3 bg-green-500 text-white px-8 py-5 rounded-2xl font-bold text-lg hover:bg-green-600 transition-all shadow-xl hover:shadow-green-200 hover:-translate-y-1 w-full sm:w-auto group">
                    <Smartphone size={24} />
                    <span>WhatsApp Me</span>
                    <ArrowRight className="opacity-0 -ml-4 group-hover:opacity-100 group-hover:ml-0 transition-all" />
                </a>
                <a href="mailto:majidshah1875@gmail.com" className="flex items-center justify-center gap-3 bg-white text-slate-700 border-2 border-slate-100 px-8 py-5 rounded-2xl font-bold text-lg hover:border-indigo-200 hover:text-indigo-600 transition-all w-full sm:w-auto">
                    <Mail size={24} />
                    <span>majidshah1875@gmail.com</span>
                </a>
            </div>
            <p className="mt-8 text-sm text-slate-400">Response time: usually under 30 minutes.</p>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-white border-t border-slate-100 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="text-center md:text-left">
            <div className="flex items-center gap-2 mb-2 justify-center md:justify-start">
               <Grid size={20} className="text-indigo-600" />
               <span className="font-bold text-xl text-slate-900">
                Conversion<span className="text-indigo-600">Grid</span>
              </span>
            </div>
            <p className="text-sm text-slate-500">Helping Local Businesses Win Online.</p>
          </div>
          <div className="flex gap-8 text-sm font-medium text-slate-600">
            <a href="#" className="hover:text-indigo-600 transition-colors">Privacy</a>
            <a href="#" className="hover:text-indigo-600 transition-colors">Terms</a>
          </div>
          <div className="text-sm text-slate-400">
            © 2026 Conversion Grid.
          </div>
        </div>
      </footer>

    </div>
  );
};

// Helper component for icon
const XCircle = ({size, className}) => (
  <svg 
    xmlns="http://www.w3.org/2000/svg" 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    strokeWidth="2" 
    strokeLinecap="round" 
    strokeLinejoin="round" 
    className={className}
  >
    <circle cx="12" cy="12" r="10"></circle>
    <line x1="15" y1="9" x2="9" y2="15"></line>
    <line x1="9" y1="9" x2="15" y2="15"></line>
  </svg>
);

export default OnePageWebsite;